<template>
  <section class="content">
    <el-form ref="form"
             :model="formData"
             :rules="formRules"
             size="small"
             label-width="120px"
             label-position="left">
      <el-row>
        <el-col :span="12">
          <div class="titleSty">发货方默认值配置</div>
        </el-col>
        <el-col :span="12"
                class="buttonSty">
          <el-button type="primary"
                     plain
                     size="medium"
                     @click="back">返回</el-button>
          <el-button type="primary"
                     size="medium"
                     :loading="loading"
                     @click="handleSubmit">提交</el-button>
        </el-col>
      </el-row>
      <el-row class="mt30">
        <el-col :span="8">
          <el-form-item label="运输模式"
                        prop="transportMode">
            <Radio v-model="formData.transportMode"
                   :options="transportModeOptions" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货物类型"
                        prop="goodsCategory">
            <Radio v-model="formData.goodsCategory"
                   :options="goodsCategoryOptions" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装方式"
                        prop="packageMode">
            <Radio v-model="formData.packageMode"
                   :options="packageModeOptions" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="计费模式"
                        prop="chargeMode">
            <BillingModeSelect v-model="formData.chargeMode" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计价单位"
                        prop="priceUnit">
            <BillingUnitSelect v-model="formData.priceUnit"
                               :mode="formData.chargeMode"
                               :styles="'width: 60%;'" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物品类型"
                        prop="goodsType">
            <SimpleGoodsTypeSelect v-model="formData.goodsType"
                                   :styles="'width: 60%;'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否保价"
                        prop="insure">
            <el-switch v-model="formData.insure" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="运输要求">
            <!-- <TransportTagsSelect v-model="formData.transportTags" /> -->
            <span class="flex-start">
              <el-checkbox v-model="formData.pick"
                           :true-label="1"
                           :false-label="0">提货</el-checkbox>
              <!-- <div v-if="formData.pick">规则：
                <el-button type="text"
                           @click="visible=true; askType='pick';">配置</el-button>
              </div> -->
              <el-checkbox v-model="formData.deliver"
                           :class="formData.pick? 'ml60' : ''"
                           :true-label="1"
                           :false-label="0">送货</el-checkbox>
              <!-- <div v-if="formData.deliver">规则：
                <el-button type="text"
                           @click="visible=true; askType='deliver'">配置</el-button>
              </div> -->
              <el-checkbox v-model="formData.onLoad"
                           :class="formData.deliver? 'ml60' : ''"
                           :true-label="1"
                           :false-label="0">装货</el-checkbox>
              <!-- <div v-if="formData.onLoad">规则：
                <el-button type="text"
                           @click="visible=true; askType='onLoad'">配置</el-button>
              </div> -->
              <el-checkbox v-model="formData.offLoad"
                           :class="formData.onLoad? 'ml60' : ''"
                           :true-label="1"
                           :false-label="0">卸货</el-checkbox>
              <!-- <div v-if="formData.offLoad"
                   class="ml30">规则：
                <el-button type="text"
                           @click="visible=true; askType='offLoad'">配置</el-button>
              </div> -->
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="默认地址："></el-form-item>
      <el-table :data="addressList"
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <template v-for="(item, index) in tableHeaderData">
          <el-table-column v-if="item.type === 'set'"
                           :key="index"
                           :prop="item.type"
                           :label="item.label"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <default-shipping-address-switch :value="scope.row"
                                               @search="page = 1; getAddressList()" />
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.type === 'area'"
                           :key="index"
                           :prop="item.type"
                           :label="item.label"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{scope.row.province}}{{scope.row.city}}{{scope.row.district}}{{scope.row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else
                           :key="index"
                           :prop="item.type"
                           :label="item.label"
                           :show-overflow-tooltip="true">
          </el-table-column>
        </template>
      </el-table>
      <el-pagination background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     :page-sizes="pageSizeOptions"
                     :page-size.sync="size"
                     :current-page.sync="page"
                     class="pageSty"
                     @size-change="getAddressList()"
                     @current-change="getAddressList()">
      </el-pagination>
    </el-form>
    <transport-tags-dialog :visible.sync="visible"
                           :ask-type="askType" />
  </section>
</template>

<script>
// 发货方下单配置
import axios from "axios";
import Radio from "@/components/advance/Radio";
import BillingUnitSelect from "@basic/BillingUnitSelect.vue";
import BillingModeSelect from "@basic/BillingModeSelect.vue";
import SimpleGoodsTypeSelect from "@/components/advance/SimpleGoodsTypeSelect.vue";
import TransportTagsSelect from "@basic/TransportTagsSelect.vue";
import TransportTagsDialog from "./component/TransportTagsDialog.vue"
import DefaultShippingAddressSwitch from "@/components/table/column/DefaultShippingAddressSwitch.vue";
import { shippingAddress, basic } from "@/api/index.js";
import { transportModeOptions, goodsCategoryOptions, packageModeOptions } from "@/libs/constant.js";
import _ from "lodash";
export default {
  name: "CustomerConfig",
  components: {
    TransportTagsSelect,
    BillingModeSelect,
    Radio,
    BillingUnitSelect,
    DefaultShippingAddressSwitch,
    SimpleGoodsTypeSelect,
    TransportTagsDialog
  },
  data () {
    return {
      page: 1,
      size: 10,
      total: 0,
      pageSizeOptions: [10, 20, 50, 100],
      formRules: {},
      loading: false,
      formData: { transportMode: 1, pick: 1, deliver: 1, onLoad: null, offLoad: null },
      tableHeaderData: [
        { label: "地址", type: "area" },
        { label: "联系人", type: "contactName" },
        { label: "联系电话", type: "contactMobile" },
        { label: "设置默认", type: "set" },
      ],
      addressList: [],
      visible: false,
      askType: null, //运输要求类型
      transportModeOptions,
      goodsCategoryOptions,
      packageModeOptions
    };
  },
  computed: {
    customerId () {
      return this.$route.query?.customerId;
    },
    filterData () {
      return {
        page: this.page,
        size: this.size,
        customerId: this.customerId,
        "sort": [{ "asc": false, "name": "createAt" }]
      }
    }
  },
  created () {
    this.loadConfig();
    this.getAddressList();
  },
  methods: {
    async loadConfig () {
      const { data } = await axios.get(`/basic/customer/order/defaults/${this.customerId}`);
      if (data) {
        this.formData = { ...data, insure: data.insure === 1 ? true : false };
      }
    },
    async getAddressList () {
      const { data } = await shippingAddress.search(this.filterData)
      this.addressList = data.records;
      this.total = data.total;
    },
    handleSubmit: _.debounce(function () {    // 触发事件
      this.submit();
    }, 600),
    async submit () {
      await this.$refs.form.validate();
      this.loading = true;
      await basic.saveCustomerConfig({
        ...this.formData,
        insure: this.formData.insure ? 1 : 0,
        customerId: this.customerId
      });
      this.loading = false;
      this.back();
    },
    // 返回
    back () {
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background: var(--prev-bg-white);
  padding: 20px;
  position: relative;
  height: 88vh;
  overflow-y: auto;
}
.titleSty {
  height: 16px;
  border-left: 2px solid var(--prev-color-primary);
  padding-left: 6px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 5px;
}
.buttonSty {
  display: flex;
  justify-content: flex-end;
}
.mt30 {
  margin-top: 30px;
}
.ml30 {
  margin-left: 30px;
}
.ml60 {
  margin-left: 60px;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.pageSty {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
